<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Cose</title>
	<link rel="stylesheet" type="text/css" href="../../pages/index/style.css">
</head>
<body>
<div id="main">
	<img :src="'./images/pic/'+random+'.jpg'" onerror="randomPic(this)" class="profile" v-if="!ok" v-on:click="getRandom()">
	<input type="text" id="userName" v-model="name" v-on:change="change()" v-if="!ok" placeholder="给自己取个昵称吧">
	<aside v-if="ok">
		<img class="avatar" :src="'/images/pic/'+random+'.jpg'" onerror="randomPic(this)">
		<div>微信</div>
		<div>通讯录</div>
		<div>发现</div>
		<div>我</div>
	</aside>
	<section v-if="ok">
		<header>
			<input v-model="keyword" placeholder="搜索" />
		</header>
		<div v-if="saloon" :class="talking == 'saloon'? 'user userselected': 'user'" v-on:click="talkTo('saloon')">
			<img :src="'/images/pic/'+saloon.ifm.pic+'.jpg'" onerror="randomPic(this)">
			<div class="text">
				<p>大客厅</p>
				<div class="view" v-if="saloon.cose.length>0">{{saloon.cose[saloon.cose.length-1].type == 'text'?saloon.cose[saloon.cose.length-1].message:'[图片]'}}</div>
			</div>
			<div class="tip" v-show="saloon.tip">{{saloon.tip}}</div>
			<div v-if="saloon.cose.length>0" class="time">{{saloon.cose[saloon.cose.length-1].time_}}</div>
		</div>

		<div :class="talking == user.ifm.name? 'user userselected': 'user'" v-for="user in users" v-on:click="talkTo(user.ifm.name)" v-if="user.ifm.name != name">
			<img :src="'/images/pic/'+user.ifm.pic+'.jpg'" onerror="randomPic(this)">
			<div class="text">
				<p>{{user.ifm.name}}</p>
				<div class="view" v-if="user.cose.length>0">{{user.cose[user.cose.length-1].type == 'text'?user.cose[user.cose.length-1].message:'[图片]'}}</div>
			</div>
			<div class="tip" v-show="user.tip">{{user.tip}}</div>
			<div v-if="user.cose.length>0" class="time">{{user.cose[user.cose.length-1].time_}}</div>
		</div>
	</section>
	<article v-if="ok" v-show="talking">
		<div class="top"><img src="../../images/back.png" onclick="slideBack()" /><span>{{talking}}</span></div>
		<div id="msg" v-if="talking=='saloon'">
			<div :class="name==chat.speaker.ifm.name?'box2':'box'" v-for="chat in saloon.cose">
				<img class="avatar" :src="'/images/pic/'+chat.speaker.ifm.pic+'.jpg'" onerror="randomPic(this)">
				<p v-if="chat.type=='text'">{{chat.message}}</p>
				<img class="imageMessage" v-if="chat.type=='image'" :src="chat.message" onclick="imageViewer(this.src,this)" />
				<div :class="chat.type=='text'?'arrow':'arrow2'"></div>
			</div>
		</div>
		<div id="msg" v-for="talk in users" v-if="talk.ifm.name==talking">
			<div :class="name==chat.speaker.ifm.name?'box2':'box'" v-for="chat in talk.cose">
				<img class="avatar" :src="'/images/pic/'+chat.speaker.ifm.pic+'.jpg'" onerror="randomPic(this)">
				<p v-if="chat.type=='text'">{{chat.message}}</p>
				<img class="imageMessage" v-if="chat.type=='image'" :src="chat.message" onclick="imageViewer(this.src,this)" />
				<div :class="chat.type=='text'?'arrow':'arrow2'"></div>
			</div>
		</div>
		<textarea></textarea>
		<div class="tools">
			<input type="file" id="file" name="file" style="display: none" @change="sendFile" />
			<img src="../../images/file.png" alt="发送文件" @click="uploadFile">
		</div>
		<button>发送(S)</button>
	</article>
</div>
</body>
<script type="text/javascript" src="../../javascripts/vue.min.js"></script>
<script type="text/javascript" src="/socket.io/socket.io.js"></script>
<script type="text/javascript" src="../../pages/index/main.js"></script>
</html>
